<template>
  <view
    class="TeamItem animate__animated animate__bounceInUp"
    @click="skipToTeamDetail"
  >
    <image class="imageBg" :src="teamDetail.cover" mode="widthFix"></image>
    <view class="content">
      <view class="title">{{ teamDetail.title }}</view>
      <view class="introduce">{{ teamDetail.introduce }}</view>
      <view class="tagGroup">
        <van-tag
          :type="tagType[index]"
          size="small"
          plain
          class="tag"
          v-for="(item, index) in teamDetail.tags"
          :key="index"
          >{{ item }}</van-tag
        >
      </view>
      <view class="people">
        <image
          src="../../static/icons/me.png"
          style="
            width: 30rpx;
            height: 30rpx;
            margin-top: 5rpx;
            margin-right: 5rpx;
          "
        ></image>
        <text>
          {{ teamDetail.userList.length + 1 }} / {{ teamDetail.number }}
        </text>
      </view>
      <!-- <view class="time"
        >创建时间：{{ $formatTime.formatTime(teamDetail.createTime) }}</view
      > -->
      <view class="tip" style="background-color: #dd6161" v-if="isPrivate"
        >私密</view
      >
      <view class="tip" style="background-color: #05a47d" v-if="isFull"
        >满员</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "MyTeam",
  props: {
    teamDetail: Object,
  },
  mounted() {
    this.initStatus();
  },
  data() {
    return {
      tagType: ["danger", "success", "warning"],
      isFull: false,
      isPrivate: false,
    };
  },
  methods: {
    initStatus() {
      // 队伍已满
      if (this.teamDetail.number === this.teamDetail.userList.length + 1) {
        this.isFull = true;
        return;
      }
      // 队伍设置私密
      if (this.teamDetail.password.length) {
        this.isPrivate = true;
      }
    },

    skipToTeamDetail() {
      uni.navigateTo({
        url: `/pages/TeamInfo/TeamInfo?teamDetail=${encodeURIComponent(
          JSON.stringify(this.teamDetail)
        )}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.TeamItem {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  background: #fff;
  margin-bottom: 1vw;
  overflow: hidden;
  .imageBg {
    width: 100%;
  }
  .content {
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    .title {
      width: 90%;
      font-weight: 500;
      font-size: 32rpx;
    }
    .introduce {
      margin: 10rpx 0;
      width: 90%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 24rpx;
      color: #aaa;
    }
    .tagGroup {
      margin-bottom: 10rpx;
      .tag {
        margin-right: 10rpx;
      }
    }
    .people,
    .time {
      font-size: 24rpx;
      color: #05a47d;
      margin-bottom: 5rpx;
    }
    .people {
      display: flex;
      align-items: center;
    }
  }
  .tip {
    position: absolute;
    box-sizing: border-box;
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 10rpx 20rpx;
    color: #fff;
    right: -55rpx;
    top: 25rpx;
    font-size: 24rpx;
    transform: rotate(45deg);
  }
}
</style>
